<template>
	<a-card class="my_application" title="我的应用" :bordered="false">
		<a-link href="link">
			<template #icon>
				<icon-xigua-color />
			</template>
			西瓜视频
		</a-link>
		<a-link href="link">
			<template #icon>
				<icon-faceBook-circle-fill />
			</template>
			faceBook
		</a-link>
		<a-link href="link">
			<template #icon>
				<icon-lark-color />
			</template>
			飞鸽
		</a-link>
		<a-link href="link">
			<template #icon>
				<icon-tiktok-color />
			</template>
			抖音
		</a-link>
		<a-link href="link">
			<template #icon>
				<icon-gitlab />
			</template>
			gitlab
		</a-link>
		<a-link href="link">
			<template #icon>
				<icon-google />
			</template>
			google
		</a-link>
		<a-link href="link">
			<template #icon>
				<icon-qq-zone />
			</template>
			QQ空间
		</a-link>
		<a-link href="link">
			<template #icon>
				<icon-github />
			</template>
			github
		</a-link>
		<a-link href="link">
			<template #icon>
				<icon-codepen />
			</template>
			codepen
		</a-link>
		<a-link href="link">
			<template #icon>
				<icon-wechat />
			</template>
			微信
		</a-link>
		<a-link href="link">
			<template #icon>
				<icon-weibo-circle-fill />
			</template>
			微博
		</a-link>
		<a-link href="link">
			<template #icon>
				<icon-alipay-circle />
			</template>
			支付宝
		</a-link>
	</a-card>
</template>

<script lang="ts" setup></script>

<style lang="scss" scoped>
.arco-card.my_application {
	margin-top: 16px;
	overflow: hidden;
	border-radius: 4px;
	border: solid 1px var(--color-border-2);
	&:deep(.arco-card-header) {
		padding: 0;
	}
	&:deep(.arco-card-header-title) {
		padding: 0 16px;
		font-size: 15px;
		font-weight: bold;
	}
	&:deep(.arco-card-body) {
		display: grid;
		grid-gap: 16px;
		grid-template-columns: repeat(3, 1fr);
		padding: 16px;
	}
	.arco-link {
		display: flex;
		flex-direction: column;
		color: var(--color-text-1);
		padding: 0 4px 8px;
		&:hover {
			color: rgb(var(--primary-6));
		}
		&:deep(.arco-link-icon) {
			font-size: 32px;
			margin: 0 auto;
			line-height: 1.5;
		}
		&:deep(.arco-link-text) {
			font-size: 12px;
			margin-top: 8px;
		}
	}
}
</style>
